<template>
  <div>
    <el-dialog :title="fromData.id ? '修改角色' : '添加角色'" :visible.sync="flag" width="40%" @close="close">
      <el-form
        :model="fromData"
        ref="form"
        :rules="rules"
        label-width="80px"
        :inline="false"
        size="normal"
      >
        <el-form-item prop="role_name" label="角色名称">
          <el-input
            size="small"
            placeholder="请输入角色名称"
            v-model="fromData.role_name"
          ></el-input>
        </el-form-item>
        <el-form-item prop="identify" label="角色标识">
          <el-input
            size="small"
            placeholder="请输入角色标识"
            v-model="fromData.identify"
          ></el-input>
        </el-form-item>
        <el-form-item prop="description" label="角色描述">
          <el-input
            type="textarea"
            size="small"
            placeholder="请输入角色描述"
            v-model="fromData.description"
          ></el-input>
        </el-form-item>
        <el-form-item label="角色权限">
          <el-tree
            ref="tree"
            :data="treeData"
            :props="{ label: 'permission_name' }"
            node-key="id"
            show-checkbox
            :default-checked-keys="clickTreeList"
          />
        </el-form-item>
      </el-form>

      <span slot="footer">
        <el-button @click="flag = false">取消</el-button>
        <el-button type="primary" @click="btnOk">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getApprovalAPI } from "@/api/approval";
import { addRoleAPI, putRoleApi } from "@/api/role";

export default {
  name: "addrole",
  data() {
    return {
      flag: false,
      fromData: {
        role_name: "",
        identify: "",
        description: "",
        authlist: [],
      },
      treeData: [],
      clickTreeList: [],
      //   验证
      rules: {
        role_name: [
          { required: true, message: "请输入角色名称", trigger: "blur" },
        ],
        identify: [
          { required: true, message: "请输入角色标识", trigger: "blur" },
        ],
        description: [
          { required: true, message: "请输入角色描述", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.roleData();
  },
  methods: {
    // 角色权限
    async roleData() {
      const res = await getApprovalAPI();
      // console.log(res);
      this.treeData = res;
      // transListToTree(res, 0);
    },
    close() {
      this.$refs.form.clearValidate();
      this.fromData = {
        role_name: "",
        identify: "",
        description: "",
      };
      this.$nextTick(() => {
        this.$refs.tree.setCheckedKeys([]);
      });
      this.flag = false;
    },
    // 确定按钮提交
    async btnOk() {
      this.$refs.form.validate();
      // 发送请求
      this.fromData.authlist = [
        ...this.$refs.tree.getCheckedKeys(),
        ...this.$refs.tree.getHalfCheckedKeys(),
      ];
      this.fromData.id
        ? await putRoleApi(this.fromData.id, this.fromData)
        : await addRoleAPI(this.fromData);
      // 提示成功
      this.$message.success("操作成功");
      // 关闭表单
      this.flag = false;
      // 刷新表单
      this.$emit("upDataList");
    },
  },
};
</script>

<style>
</style>